<template>
    <div class="compact-container">
        <!-- 查询条件 -->
        <div class="compact-query">
            <span>出库单号：</span>
            <el-input v-model="othoutord_code" class="compact-input" size="small" />
            <span class="compact-label">出库类型：</span>
            <el-select v-model="optionsValue" placeholder="请选择" size="small" class="compact-select">
                <el-option v-for="item in options" :key="item.dict_value" :label="item.dict_label"
                    :value="item.dict_value" />
            </el-select>
            <el-button type="primary" @click="queryZone" size="small">查询</el-button>
            <el-button @click="reset" size="small">重置</el-button>
            <el-button type="primary" @click="addEdit" size="small" class="compact-add-btn">添加</el-button>
        </div>

        <!-- 表格展示 -->
        <transition name="fade" mode="out-in">
            <div :key="currentPage"> <!-- 添加包裹元素并设置 key -->
                <el-table :data="tableData" :span-method="objectSpanMethod" border class="compact-table"
                    :cell-style="{ padding: '4px 0', textAlign: 'center' }" :header-cell-style="{
                padding: '6px 0',
                textAlign: 'center',
                background: '#f5f7fa',
                fontWeight: 'bold'
            }">
                    <el-table-column prop="othoutord_code" label="出库单号" width="120" fixed="left">
                        <template #default="scope">
                            <span class="compact-link" @click="GoWarehouseareaInfo(scope.row.othoutord_code)">
                                {{ scope.row.othoutord_code }}
                            </span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="othoutord_type" label="出库类型" width="90">
                        <template #default="scope">
                            <el-tag size="small">{{ measure_rklx(scope.row.othoutord_type) }}</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column prop="othoutord_status" label="出库状态" width="80">
                        <template #default="scope">
                            <el-tag size="small">{{ getStatusText(scope.row.othoutord_status) }}</el-tag>
                        </template>
                    </el-table-column>


                    <el-table-column prop="othoutord_audit_statua" label="审核状态" width="80">
                        <template #default="scope">
                            <el-tag size="small">{{ getStatusTextStaus(scope.row.othoutord_audit_statua) }}</el-tag>
                        </template>
                    </el-table-column>

                    <el-table-column prop="warehouse_name" label="出库仓库" width="90" />
                    <el-table-column prop="pro_name" label="产品名称" width="90" />
                    <el-table-column prop="pro_code" label="产品编号" width="90" />
                    <el-table-column prop="pro_brand" label="品牌" width="80" />
                    <el-table-column prop="pro_model" label="规格型号" width="80" />
                    <el-table-column prop="unit" label="单位" width="70">
                        <template #default="scope">
                            <el-tag size="small">{{ measureValue(scope.row.unit) }}</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column prop="quantity" label="出库数量" width="80" />
                    <el-table-column prop="totalQuantityPerOrder" label="出库总数量" width="90" />
                    <el-table-column prop="othoutord_time" label="出库时间" width="95" />
                    <el-table-column prop="othoutord_wkeep" label="出库员" width="80" />
                    <el-table-column fixed="right" label="操作" width="200">
                        <template #default="scope">
                            <el-button size="small" @click="handleEdit(scope.row)">编辑</el-button>
                            <el-button size="small" type="danger" @click="handleDelete(scope.row)">删除</el-button>
                            <el-button size="small" type="warning" @click="handleExamine(scope.row)">审核</el-button>
                        </template>
                    </el-table-column>
                </el-table>

                <!-- 分页 -->
                <div class="compact-pagination">
                    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                        :current-page="currentPage" :page-sizes="[5, 10, 20, 30]" :page-size="pageSize"
                        layout="total, sizes, prev, pager, next, jumper" :total="pageCount" size="small" />
                </div>
            </div> <!-- 结束包裹元素 -->
        </transition>
        <!-- 审核弹窗 -->
        <el-dialog v-model="centerDialogVisible" width="385px" align-center class="compact-dialog">
            <template #header>
                <div class="compact-dialog-header">审核</div>
            </template>
            <hr />
            <div class="compact-dialog-content">
                <p>审核结果</p>
                <div class="compact-radio-group">
                    <el-radio-group v-model="auditStatus">
                        <el-radio value="1">通过</el-radio>
                        <el-radio value="2">驳回</el-radio>
                    </el-radio-group>
                </div>
                <p>审核意见</p>
                <el-input v-model="auditOpinion" type="textarea" placeholder="请输入"
                    :autosize="{ minRows: 3, maxRows: 3 }" class="compact-textarea" />
            </div>
            <hr />
            <template #footer>
                <div class="compact-dialog-footer">
                    <el-button @click="close" size="small">取消</el-button>
                    <el-button type="primary" @click="updateAudit" size="small">确定</el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>

<script setup>
import { ref, onMounted, reactive } from 'vue'
import axios from 'axios'
import { useRouter } from 'vue-router'
import { useWarehouseStore } from '@/storejs/warehouseStore';
import { ElMessageBox, ElMessage } from 'element-plus';
import dayjs from 'dayjs'
// 搜索建议字段
const othoutord_code = ref('')
const optionsValue = ref()
const options = ref([])

const pageCount = ref(0) // 总记录数
// 分页信息（可选）
const currentPage = ref(1)
const pageSize = ref(10)

// 表格数据
const tableData = ref([])

// 插件路由器实例
var router = useRouter();

const measureOptios = ref([])

// 控制审核状态的显示
const centerDialogVisible = ref(false)

const auditStatus = ref('1') // 审核状态

const auditOpinion = ref("") // 审核意见
// 获取详情单的信息
const currentOrderDetails = ref([]);
// 出库类型
const cklx = ref([]);
// 页面跳转
function GoWarehouseareaInfo(othoutord_code) {
    const warehouseStore = useWarehouseStore();
    warehouseStore.othoutord_code = othoutord_code;

    router.push('/main/Inv/Inv_othoutordDetails');
}

// 数据转换方法
const transformOthoutordData = (responseData) => {
    const result = []

    responseData.forEach((mainItem) => {
        // 计算当前主单的总数量
        const orderTotal = mainItem.details.reduce((sum, detail) => sum + (detail.othwrproddt_numder || 0), 0);
        // 记录主单的行数（用于操作列合并）
        const rowCount = mainItem.details.length;

        mainItem.details.forEach((detail, index) => {
            result.push({
                
                Othoutord_id: mainItem.othoutord_id,
                othoutord_code: mainItem.othoutord_code,
                othoutord_type: mainItem.othoutord_type,
                othoutord_status: mainItem.othoutord_status,
                othoutord_code_Associated: mainItem.othoutord_code_Associated,
                othoutord_audit_statua: mainItem.othoutord_audit_statua,
                warehouse_name: mainItem.warehouse_name,
                warehouse_code: mainItem.warehouse_code,
                zone_code: mainItem.zone_code,
                zone_name: mainItem.zone_name,
                othoutord_wkeep: mainItem.othoutord_wkeep,
                othoutord_time: formatDate(mainItem.othoutord_time),
                Othoutord_audit_opinion: mainItem.Othoutord_audit_opinion,
                pro_name: detail.pro_name,
                pro_code: detail.pro_code,
                pro_brand: detail.pro_brnad,
                pro_model: detail.pro_model,
                unit: detail.unitmeas_id,
                quantity: detail.othwrproddt_numder,
                totalQuantityPerOrder: orderTotal, // 使用计算出的总数量
                // 添加一个唯一标识符用于合并判断
                orderGroup: mainItem.othoutord_code,
                // 添加主单的行数（用于操作列合并）
                rowCount: rowCount,
                // 添加是否是主单的第一行标志（用于操作列合并）
                isFirstRow: index === 0
            })
        })
    })

    return result
}

// 日期格式化
const formatDate = (dateString) => {
    if (!dateString) return '';
    try {
        const date = new Date(dateString);
        const year = date.getFullYear();
        const month = String(date.getMonth() + 1).padStart(2, '0');
        const day = String(date.getDate()).padStart(2, '0');
        return `${year}-${month}-${day}`;
    } catch (error) {
        console.error('日期格式化错误:', error);
        return dateString;
    }
};

// 修改后的合并单元格逻辑
const objectSpanMethod = ({ row, column, rowIndex, columnIndex }) => {
    // 需要合并的字段
    const fieldsToMerge = [
        'othoutord_audit_statua',
        'othoutord_wkeep',
        'othoutord_time',
        'othoutord_status',
        'othoutord_code',
        'othoutord_type',
        'warehouse_name',
        'totalQuantityPerOrder', // 出库总数量也合并
    ];

    // 操作列特殊处理 - 只在第一行显示
    if (columnIndex === 14) { 
        if (row.isFirstRow) {
            return {
                rowspan: row.rowCount,
                colspan: 1
            };
        } else {
            return {
                rowspan: 0,
                colspan: 0
            };
        }
    }

    // 入库总数量特殊处理 - 只在第一行显示
    if (column.property === 'totalQuantityPerOrder') {
        if (row.isFirstRow) {
            return {
                rowspan: row.rowCount,
                colspan: 1
            };
        } else {
            return {
                rowspan: 0,
                colspan: 0
            };
        }
    }

    // 其他字段的合并逻辑
    if (fieldsToMerge.includes(column.property)) {
        // 只对同一个出库单号内的相同值进行合并
        const currentGroup = row.orderGroup;

        // 判断是否是当前组的第一个元素
        if (rowIndex === 0 || tableData.value[rowIndex - 1].orderGroup !== currentGroup) {
            // 计算当前组内该字段相同的行数
            let count = 1;
            for (let i = rowIndex + 1; i < tableData.value.length; i++) {
                // 只比较同一组内的相同字段
                if (tableData.value[i].orderGroup === currentGroup &&
                    tableData.value[i][column.property] === row[column.property]) {
                    count++;
                } else {
                    break;
                }
            }
            return { rowspan: count, colspan: 1 };
        } else {
            // 检查当前行是否与前一行属于同一个组且字段值相同
            const prevRow = tableData.value[rowIndex - 1];
            if (prevRow.orderGroup === currentGroup &&
                prevRow[column.property] === row[column.property]) {
                return { rowspan: 0, colspan: 0 };  
            } else {
                // 当前组内新值的起始位置
                let count = 1;
                for (let i = rowIndex + 1; i < tableData.value.length; i++) {
                    if (tableData.value[i].orderGroup === currentGroup &&
                        tableData.value[i][column.property] === row[column.property]) {
                        count++;
                    } else {
                        break;
                    }
                }
                return { rowspan: count, colspan: 1 };
            }
        }
    }
};


const getStatusTextStaus = (status) => {
    switch (status) {

        case "0": return "审核驳回";
        case "1": return "审核通过";
        default: return "待审核";
    }
}

const getStatusText = (status) => {
   
    switch (status) {
        case 0: return "待审核";
        case 1: return "已出库";
        case 2: return "部分出库";
        default: return "未知状态";
    }
};

// 查询显示--出库类型
function getClassify_cklx() {
    axios.get("http://localhost:5181/api/Dict/Get_Dict_Datas", {
        params: {
            dict_type: "inv_othoutord"
        }, headers: {
            authorization: `Bearer ${localStorage.getItem('token')}`
        }
    }).then((result) => {
        cklx.value = result.data

    }).catch((err) => {
        console.info(err)
    });
}
function measure_rklx(row) {
    if (!row) return "无";
    const parentDept = cklx.value.find((sex) => sex.dict_value == row);
    return parentDept ? parentDept.dict_label : "无";
}
// 出库单号
var othoutord_code_update = ref("");
// 仓库编码
var weahouse_code = ref("");
var warehouse_name = ref("");
// 库位编码
var zone_code = ref("");
var zone_name = ref("");
// 获取出库类型,来进行判断
var othoutord_type = ref("")

//id
var othoutord_idUpdate =ref("")

//关联单号
var othoutord_code_Associated=ref("")
// 控制审核状态的显示
function handleExamine(row) {
    //console.log(currentOrderDetails);

    auditStatus.value = row.othoutord_audit_statua;
    auditOpinion.value = row.othoutord_audit_opinion;

    if (row.othoutord_audit_statua == "1") {
        ElMessage.info(`订单${row.othoutord_code}已审核,不可以再次审核`)
    } else {
        // 显示
        centerDialogVisible.value = true;
        othoutord_code_update.value = row.othoutord_code;
        weahouse_code.value = row.warehouse_code;
        zone_code.value = row.zone_code;
        zone_name.value = row.zone_name;
        warehouse_name.value = row.warehouse_name;
        othoutord_type.value = row.othoutord_type;
        othoutord_idUpdate.value = row.Othoutord_id;
        othoutord_code_Associated.value = row.othoutord_code_Associated;
        loadOrderDetails(row.othoutord_code);
      
    }
}

function loadOrderDetails(othoutord_code) {
    axios.get("http://localhost:5181/api/Inv_othoutord/iInvothproddetailslSelect", {
        params: { Othoutord_code: othoutord_code },
        headers: { authorization: `Bearer ${localStorage.getItem('token')}` }
    }).then(res => {
        currentOrderDetails.value = res.data;
    }).catch(err => {
        console.error("加载订单明细失败:", err);
    });
}

/// 修改审核状态 
function updateAudit() {
   
    if (auditStatus.value !== "1" && auditStatus.value !== "2") {
        ElMessage.error('请选择审核状态');
        return;
    }


    axios.put(
        "http://localhost:5181/api/Inv_othoutord/Inv_othoutord_examineUpdate",
        {
            Othoutord_code: othoutord_code_update.value,
            Othoutord_audit_by: localStorage.getItem('userLName'),
            Othoutord_audit_time: dayjs().format('YYYY-MM-DDTHH:mm:ss.SSSZ'),
            othoutord_audit_statua: auditStatus.value,
            othoutord_audit_opinion: auditOpinion.value,
        },
        {
            headers: {
                authorization: `Bearer ${localStorage.getItem('token')}`
            }
        }
    ).then(async (res) => {
        if (res.data > 0) {
            if (auditStatus.value == 1) {
                ElMessage.success('审核通过');
                // 更新仓库容量
                const updateRequestsWeahousecapacity = currentOrderDetails.value.map(item => ({
                    warehouse_code: weahouse_code.value,
                    zone_code: zone_code.value,
                    location_code: item.location_code,
                    Othwrproddtl_numder: Number(item.othwrproddt_numder) || 0,
                    
                }));
                console.log("内容", updateRequestsWeahousecapacity);

                await Update_capacity(updateRequestsWeahousecapacity);

                //减少仓库库存数量 
                const updateRequestsWeahouse = currentOrderDetails.value.map(item => ({
                    warehouse_code: weahouse_code.value,
                    zone_code: zone_code.value,
                    location_code: item.location_code,
                    stock_numder: Number(item.othwrproddt_numder) || 0,
                    stock_entry_no: item.stock_entry_no,
                    pro_code:item.pro_code
                }));
                console.log(updateRequestsWeahouse);
               //减少库存数量
                await Update_stock(updateRequestsWeahouse);


                // 订单审核通过之后,修改仓库容量和库存数量
                if (othoutord_type.value=="1"){
                    //调拨出库--修改调拨trf_ckpd这个字段状态
                    await Update_trf();

                    //修改出库单的状态
                   await  update_type();
                }else if (othoutord_type.value=="2"){ 
                    //报损出库--修改库存--修改抽检字段
                   await Update_samp();

                    //修改出库单的状态
                    await update_type();
                }else if(othoutord_type.value=="3"){
                    //盘亏出库
                    await Inv_qty_update_qty_store_bhg(othoutord_code_Associated.value);

                    //修改出库单的状态
                    await update_type();
                }
                // 关闭弹窗
                close();
                // 刷新数据
                queryZone();
                Count();
            } else {
                ElMessage.error('审核驳回');
                close();
                Count();
                queryZone();
            }
            // 刷新数据
    
        } else {
            ElMessage.error('审核失败');
        }
    }).catch((err) => { 
        console.info(err);
    });
}
//修改出库状态
async function Inv_qty_update_qty_store_bhg(code){
    axios.put("http://localhost:5181/api/Inv_Qty/Inv_qty_update_qty_store_bhg",{},{
        params:{
            code:code
        },
        headers: {
            authorization: `Bearer ${localStorage.getItem('token')}`
        }
    }).then((result) => {
   
    }).catch((err) => {
        console.info(err);
    });
}







//报损出库--修改库存--修改抽检字段
async function Update_samp(){
    axios.put("http://localhost:5181/api/Inv_Samp/Inv_Samp_Outbound_update",{},{
        params:{
            id: othoutord_idUpdate.value
        },
        headers: {
            authorization: `Bearer ${localStorage.getItem('token')}`
        }
    }).then((result) => {
    
    }).catch((err) => {
        console.info(err);
    });
}
//修改出库状态type
async function update_type() {
    try {
        const result = await axios.put(
            "http://localhost:5181/api/Inv_othoutord/Inv_othproddetails_updateType",
            {},
            {
                params: { id: othoutord_idUpdate.value },
                headers: {
                    authorization: `Bearer ${localStorage.getItem('token')}`
                }
            }
        );
        if (result.data <= 0) {
            ElMessage.error('修改出库状态修改失败');
        }
    } catch (err) {
        console.error(err);
        throw err; // 让调用方能 catch
    }
}


//减少库存数量
async function Update_stock(updateRequestsWeahouse){
    axios.put("http://localhost:5181/api/Inv_Stock/Stock_update", updateRequestsWeahouse,{
        headers: {
            authorization: `Bearer ${localStorage.getItem('token')}`
        }
    }).then((result) => {
        const { succes, count } = result.data;

        if (succes && count > 0) {
         
        } else {
            ElMessage.error("库存更新失败，未影响任何记录");
        }
    }).catch((err) => {
       console.info(err); 
    });
}
//增加仓库容量--库区,库位
async function Update_capacity(updateRequestsWeahousecapacity){
    axios.put("http://localhost:5181/api/Db_warehouse/Warehouse_update_liaison_newly", updateRequestsWeahousecapacity,{
        headers: {
            authorization: `Bearer ${localStorage.getItem('token')}`
        }
    }).then((result) => {
     
        if(result.data>0){ 
            
        }else{
            ElMessage.error("仓库容量更新失败");
        }
    }).catch((err) => {
        console.log(err);
    });

}


async function Update_trf(){
    axios.put("http://localhost:5181/api/Inv_trf/Inv_Trf_update_trf_ckpd",
        {}, // 请求体数据（如果后端不需要请求体，可以留空）
        {
            params: {
                othoutord_id: othoutord_idUpdate.value,
            },
            headers: {
                authorization: `Bearer ${localStorage.getItem('token')}`
            }
        }
    )
        .then((result) => {
            // if (result.data > 0) {
              
            // } else {
            //     ElMessage.error('调拨状态修改失败');
            // }
        })
        .catch((err) => {
            console.error(err);
        });

}


// 取消审核按钮
function close() {
    centerDialogVisible.value = false
    auditStatus.value = "1"
    auditOpinion.value = ""
}

// 查询计量单位
function getMeasure() {
    axios.get("http://localhost:5181/api/Dict/Get_Dict_Datas", {
        params: {
            dict_type: "db_measure"
        }, headers: {
            authorization: `Bearer ${localStorage.getItem('token')}`
        }
    }).then((result) => {
        measureOptios.value = result.data
        measureOptios.value = [{
            dict_value: "0", dict_label: "请选择单位"
        }, ...result.data]
    }).catch((err) => {
        console.info(err)
    });
}

function measureValue(row) {
    if (!row) return "无";
    const parentDept = measureOptios.value.find((sex) => sex.dict_value == row);
    return parentDept ? parentDept.dict_label : "无";
}
// const loading = ref(false)
// 请求数据填充表格
function queryZone() {
    // loading.value = true
    axios.get('http://localhost:5181/api/Inv_othoutord/inv_othoutord_', {
        params: {
            searchKeyword: othoutord_code.value,
            othoutord_type: optionsValue.value,
            currentPage: currentPage.value,
            pageSize: pageSize.value
        },
        headers: {
            authorization: `Bearer ${localStorage.getItem('token')}`
        }
    })
    .then(async(result) => {
        tableData.value = transformOthoutordData(result.data)
        Count();
        await new Promise(resolve => setTimeout(resolve, 300))
    })
    .catch((err) => {
        console.error(err)
    }).finally(() => {
        // loading.value = false; // 无论成功失败都设置为 false
    });
}

// 获取下拉选项数据
function getClassify() {
    axios.get("http://localhost:5181/api/Dict/Get_Dict_Datas", {
        params: {
            dict_type: "inv_othoutord"
        }, headers: {
            authorization: `Bearer ${localStorage.getItem('token')}`
        }
    }).then((result) => {
        options.value = result.data
    }).catch((err) => {
        console.info(err)
    });
}

// 查询总数
function Count() {
    axios.get("http://localhost:5181/api/Inv_othoutord/inv_othoutord_Count", {
        params: {
            searchKeyword: othoutord_code.value,
            othoutord_type: optionsValue.value,
        },
        headers: {
            authorization: `Bearer ${localStorage.getItem('token')}`,
        }
    }).then((result) => {
        pageCount.value = result.data
    }).catch((err) => {
        console.info(err)
    })
}

// 重置查询条件
function reset() {
    othoutord_code.value = ''
    optionsValue.value = null
    queryZone()
}

// 每页数量变化--选择传递每页显示数
const handleSizeChange = (newSize) => {
    pageSize.value = newSize;
    //重新按照pageSize和currentPage重新请求数据
    queryZone();
};

// 当前页变化
const handleCurrentChange = (newPage) => {
    currentPage.value = newPage;
    //重新按照pageSize和currentPage重新请求数据
    queryZone();
};

// 编辑操作
const handleEdit = (row) => {
    if (row.othoutord_type == "1") {
        ElMessage.info('调拨出来库不可以编辑');
        return;
    }

    if (row.othoutord_type == "2") {
        ElMessage.info('报损出库不可以编辑');
        return;
    }

    if (row.othoutord_audit_statua == 1) {
        ElMessage.info('订单已审核，不可编辑');
    } else {
        const othoutord_code = useWarehouseStore();
        othoutord_code.othoutord_code = row.othoutord_code;
        router.push('/main/Inv/Inv_othoutorUpdate');
    }
};  

// 删除操作
const handleDelete = async (row) => {
   
        if (row.othoutord_audit_statua=="1"){   
            ElMessage.info(`订单${row.othoutord_code}已审核,不可以进行删除`)
        }else{
            try {
                ElMessageBox.confirm(
                    `你确定要删除单号为 ${row.othoutord_code} 的出库单记录吗？`,
                    '提示',
                    {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }
                ).then(() => {
                    const res = axios.put(
                        "http://localhost:5181/api/Inv_othoutord/Inv_othoutord_delete",null,
                        {
                            params: { othoutord_id: row.Othoutord_id },
                            headers: {
                                authorization: `Bearer ${localStorage.getItem   ('token')}`
                            }
                        }).then((result) => {
                            if (result.data > 0) {
                                ElMessage.success('删除成功');
                                Count();
                                queryZone();
                            } else {
                                ElMessage.error('删除失败');
                            }
                        }).catch((err) => {
                            console.log(err);
                        });

                });

            } catch (err) {
                if (err === 'cancel') {
                    console.log('用户取消删除');
                } else {
                    console.error('删除出错:', err);
                    ElMessage.error('删除失败，请稍后重试');
                }
            }
        }
};



// 添加操作
const addEdit = () => {
    router.push('/main/Inv/Inv_othoutorAdd');
    // router.push('/main/Inv/InvotherWarehouseOutAdd'); // 如果有独立的出库添加页面，使用这个路径
}

// 页面加载时初始化数据
onMounted(() => {
    getClassify()
    queryZone()
    Count()
    getMeasure()
    getClassify_cklx()
})
</script>

<style scoped>
.compact-query span {
    font-size: 16px;
    /* 可根据需要调整 */

}
.compact-container {
    padding: 12px;
    font-size: 13px;
}

.compact-query {
display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
    margin-top: -30px;
}

.compact-input {
    width: 160px !important;
}

.compact-label {
    margin-left: 8px;
}

.compact-select {
    width: 140px;
}

.fade-enter-active,
.fade-leave-active {
    transition: opacity 0.2s ease;
}

.fade-enter-from,
.fade-leave-to {
    opacity: 0;
}

.compact-table {
    font-size: 12px;
}

.compact-table :deep(.el-table__cell) {
    padding: 4px 0;
}

.compact-table :deep(.el-tag) {
    padding: 0 6px;
    height: 22px;
    line-height: 22px;
    font-size: 12px;
}

.compact-link {
    color: #409EFF;
    cursor: pointer;
}

.compact-pagination {
    margin-top: 12px;
    display: flex;
    justify-content: center;
}

.compact-dialog {
    border-radius: 4px;
}

.compact-dialog-header {
    text-align: left;
    font-size: 14px;
    font-weight: bold;
    padding: 0 0 8px 0;
}

.compact-dialog-content {
    text-align: left;
    padding: 8px 0;
    font-size: 13px;
}

.compact-radio-group {
    margin: 6px 0 12px 16px;
}

.compact-textarea {
    width: 100%;
    margin-top: 6px;
}

.compact-dialog-footer {
    padding-top: 8px;
}
</style>
